import React, {Component} from "react";
import ReactEcharts from "echarts-for-react";
import picture from '../timg.jpg';
import axios from "axios";
import {server_addr} from "../index";
import echarts from "echarts/lib/echarts";

export default class Risk extends Component {

    constructor(props) {
        super(props);
        this.state = {
            option_1: {},
            option_2: {},
            option_3: {},
            option_4: {},
            option_5: {},
            option_6: {},
            default: "83%"
        }
        this.getData = this.getData.bind(this);
    }

    getData(){
        var stock = window.location.href.split('?')[1].split('=')[1];
        // //历史波动率
        axios.get(server_addr+"/technique/historyRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_1: {
                    title: {left: 100, text: '历史波动率/行业平均历史波动率'},
                    legend: {top: 20, left: 550, data: ['历史波动率', '行业平均历史波动率']},
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['bar']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: '12%',
                        right: '1%'
                    },
                    xAxis: {
                        type: 'category',
                        data: dates,
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        }
                    },
                    yAxis: {type: 'value',name: '%        '},
                    series: [{
                        name: '历史波动率',
                        data: data_1,
                        type: 'line',
                        smooth: true
                    }, {
                        name: '行业平均历史波动率',
                        itemStyle:{
                            normal:{
                                color:'green',
                            }
                        },
                        data: data_2,
                        type: 'line',
                        smooth: true
                    }
                    ]
                }})
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //近二十日成交量
        axios.get(server_addr+"/technique/cjl?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data = [];
            for(var key in res.data){
                dates.push(key);
                data.push(res.data[key]);
            }
            this.setState({
                option_2: {
                    title: {left: 100, text: '近20日成交量'},
                    tooltip: {transitionDuration:0},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: '12%',
                        right: '1%'
                    },
                    xAxis: {
                        type: 'category',
                        data: dates,
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 10,
                            rotate: 35,
                        }
                    },
                    yAxis: {type: 'value'},
                    series: [{
                        name: '成交量',
                        data: data,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                }})
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //Z值
        axios.get(server_addr+"/risk/z_test?stock="+stock,{}).then((res)=>{
            this.setState({
                option_3: {
                    series: [{
                        name: 'Z值分析',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //应收账款占比
        axios.get(server_addr+"/risk/accountsReceivable?stock="+stock,{}).then((res)=>{
            this.setState({
                option_4: {
                    series: [{
                        name: '应收账款占比',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data*100}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //市盈率
        axios.get(server_addr+"/risk/pb?stock="+stock,{}).then((res)=>{
            this.setState({
                option_5: {
                    series: [{
                        name: '市盈率',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //市净率
        axios.get(server_addr+"/risk/pe?stock="+stock,{}).then((res)=>{
            this.setState({
                option_6: {
                    series: [{
                        name: '市净率',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    componentDidMount() {
        this.getData()
        this.interval = setInterval(()=>{
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "风险规避分析";
        return (
            <div style={{width:this.state.default, height:"100vh", float:"right"}}>
                <ReactEcharts option={this.state.option_1} notMerge={true}
                              style={{width:"90%", height:"32vh", marginTop:"5vh"}}/>
                <ReactEcharts option={this.state.option_2} notMerge={true}
                              style={{width:"90%", height:"32vh"}}/>
                <div style={{width:"20%", height:"25vh", marginLeft:"6%", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>Z值分析</p>
                    <ReactEcharts option={this.state.option_3} notMerge={true}
                                  style={{width:"100%", height:"20vh"}}/>
                </div>
                <div style={{width:"20%", height:"25vh", marginLeft:"2%", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>应收账款占比</p>
                    <ReactEcharts option={this.state.option_4} notMerge={true}
                                  style={{width:"100%", height:"20vh"}}/>
                </div>
                <div style={{width:"20%", height:"25vh", marginLeft:"2%", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>市盈率</p>
                    <ReactEcharts option={this.state.option_5} notMerge={true}
                                  style={{width:"100%", height:"20vh"}}/>
                </div>
                <div style={{width:"20%", height:"25vh", marginLeft:"2%", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>市净率</p>
                    <ReactEcharts option={this.state.option_6} notMerge={true}
                                  style={{width:"100%", height:"20vh"}}/>
                </div>
            </div>
        );
    }
}